<!-- Page header -->
<div class="page-header d-print-none">
    <div class="container-xl">
        <div class="row g-2 align-items-center">
            <div class="col">

                <h2 class="page-title" id="article_list_board_title">
                    搜索
                </h2>
                <!-- 帖子数量 -->
                <div class="text-muted mt-1" id="article_list_count_board"></div>
            </div>
        </div>
    </div>
</div>
<!-- Page body -->
<div class="page-body">
    <div class="container-xl">
        <div class="row justify-content-center">
            <!-- 显示列表的宽度 -->
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="divide-y" id="artical-items-body">
                            <!-- 动态生成帖子列表 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 正文 结束 -->
</div>
<script>

    $('#search-input').on('input', function () {
        let searchTimeout;
        // 防抖
        if (searchTimeout != undefined) {
            clearTimeout(searchTimeout);
        }
        searchTimeout = setTimeout(() => {
            let keyword = $(this).val();
            if (keyword.length >= 0) {
                $.ajax({
                    type: 'get',
                    url: 'article/search',
                    data: {
                        keyword: keyword
                    },
                    // 回调
                    success: function (respData) {
                        if (respData.code == 0) {
                            // 成功，构建帖子列表
                            listBuildArticleList(respData.data);
                            $('#article_list_count_board').html('帖子数量: ' + respData.data.length);
                        } else {
                            // 提示信息
                            $.toast({
                                heading: '警告',
                                text: respData.message,
                                icon: 'warning'
                            });
                        }
                    },
                    error: function () {
                        // 提示信息
                        $.toast({
                            heading: '错误',
                            text: '访问出现问题，请与管理员联系.',
                            icon: 'error'
                        });
                    }
                });
            } else {
                // 清空结果区域
                $('#search-input').val('');
                $('#artical-items-body').html('');
                $('#article_list_count_board').html('帖子数量: 0');
            }
        }, 300); // 延迟300ms
    });





</script>